import React from 'react';
import { withRouter } from 'react-router-dom';

class Remarks extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            remark:props.remark
        };
    }

    componentDidMount() {
        fetch(`https://www.prebeauty.work/user/${this.state.remark.userid}`, {
            method: 'GET',
            headers: {
                'content-type': 'application/json'
            }
        }).then((res) => {
            if (res.status === 200) {
                res.json().then((data) => {
                    this.setState({
                        username: data[0].name,
                        userimg: data[0].image
                    })
                    console.log(this.state.username,this.state.userimg)
                })
            } else {
                alert("出现一个问题");
            }
        })
    }

    render() {
        return (
            <div
                key={this.state.remark.id}
                style={{
                        width: '90%',
                        margin: 'auto',
                        marginTop: '10px',
                        borderBottom: 'dashed #CDC1C5 1px',
                    }}
            >
                <img 
                    src={this.state.userimg}
                    style={{
                        width: '30px',
                        height: '30px',
                        marginLeft: '0px',
                        marginTop: '5px',
                        borderRadius: '25px',
                        float: 'left'
                    }}
                ></img>
                <p 
                    style={{
                        width: '20%',
                        height: '30px',
                        fontSize: '12px',
                        lineHeight: '20px',
                        marginLeft: '2%',
                        marginTop: '10px',
                        float: 'left'
                    }}
                >{this.state.username}</p>
                <br />
                <p 
                    style={{
                        width: '100%',
                        marginTop: '25px',
                        fontSize: '14px',
                        lineHeight: '25px',
                    }}
                >{this.state.remark.content}</p>
                <p 
                    style={{
                        color: '#B5B5B5',
                        height: '30px',
                        fontSize: '10px',
                        lineHeight: '30px',
                    }}
                >{this.state.remark.time}</p>
            </div>
        );
    }
}

export default withRouter(Remarks);